<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link  type="text/css" rel="stylesheet"  href="../dt/css/styles.css"/>
<link  type="text/css" rel="stylesheet"  href="../dt/css/index.css"/>
<script  src="../dt/js/jquery-1.7.2.js"></script>
<!-- 动态菜单JS -->
<script type="text/javascript"  src="../dt/js/menu.js"></script>
<script  src="../dt/js/echarts.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>管理员首页</title>
</head>
<script type="text/javascript">
	 require.config({
            paths: {
                echarts: './js'//填写路径
            }
        });
        require(
        	[
        		'echarts', 
        		'echarts/chart/bar',//加载柱状图
        		'echarts/chart/line'//加载线路图
        	],
        	function(ec){
        		 var myChart = ec.init(document.getElementById('myChart'));//初始化这个容器  -- 写柱状图等需要一个容器+设置高度
            myChart.setOption({//设置柱状图的信息
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                    data:['月支出','月收入']//数据名字
                },
                toolbox: {//添加组件
                    show : true,//必须写,为true
                    feature : {
                        mark : {show: true},//设置铺助线
                        dataView : {show: true, readOnly: false},//显示数据--数据视图
                        magicType : {show: true, type: ['line', 'bar']},//转换折线图
                        restore : {show: true},//还原
                        saveAsImage : {show: true}//保存图片
                    }
                },
                calculable : true,  
                xAxis : [//横坐标
                    {
                        type : 'category',
                        data : [
                         <c:forEach items="${list.list}" var="listTmp">
                       		${map[listTmp.id]},
                       	 </c:forEach> 
                		],
	                    axisLabel: {//为值填写单位
	                        formatter: '${map[listTmp.id]} 月'
	                    }
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        min: -100,//纵坐标的最小值
                        max: 600,//最大值
                        interval: 100,//每个格子隔100
                        splitArea : {show : true},
	                    axisLabel: {//为值填写单位
	                        formatter: '{value} '
	                    }
                    }
                ],
                series : [//数据
                    {
                        name:'月支出',//填写柱状图的数据
                        type:'bar',
                        data:[
                        	<c:forEach items="${list.list}" var="listTmp"> 
	                    		${listTmp.pay},
	                    	  </c:forEach> 
                        ]
                    },
                    {
                        name:'月收入',
                        type:'bar',
                        data:[
                        	 <c:forEach items="${list.list}" var="listTmp"> 
	                    		${listTmp.income},
	                    	 </c:forEach> 
                        ]
                    }
                ]
            });

        	}
        )
</script>
<body>
	<div class="container">
 <div class="cont-top">
  <div class="companyname">甄氏五谷香</div>
  <div class="cont-top-rg">
   <ul class="advanced-menu">
    <li>
     <div class="top-search">
      <div class="t-s-l">
      </div>
      <div class="t-s-l">
       <a href="/dt/outs.do">退出</a>
     
      </div>
     </div>
    </li>
    <li class="default" style="position:relative;">
     <span class="user"><img src="../dt/img/user.png"></span>
     <a  href="#" class="special">${name }<i><img src="../dt/img/xl.png"></i></a>
     <div class="drop-down-wrap" style="width:180px;left:15px;display: none;">
      <div class="drop-down">
       <span class="triangle-border"></span>
       <span class="triangle-bg"></span>
       <ul class="del-ul">
        <li><a href="#" class="hot">甄氏五谷香</a></li>
        <li><a href="#">${name}</a></li>
       </ul>
      </div>
     </div>
    </li>    
   </ul>
  </div>
 </div>
 <div class="left-menu" style="height:949px;">
  <div class="menu-list">
   <ul>
    <li class="menu-list-01" >
     <a href="/dt/que.do?boo=true">
     <p class="fumenu">库房管理</p>
     <img class="xiala" src="../dt/img/xiala.png" />
     </a>
    </li>
    
    <li class="menu-list-02">
     <a  href="/dt/ckgl.do">
     <p class="fumenu">产品管理</p>
     <img class="xiala" src="../dt/img/xiala.png" />
     </a>
    </li>
    
    <li class="menu-list-01" >
    <a href="/dt/queryList.do?isQuery=true&orderState=已支付">
     <p class="fumenu">订单管理</p>
     <img class="xiala" src="../dt/img/xiala.png" />
     </a>
    </li>
    
    <li class="menu-list-02">
     <a href="/dt/queryFinance.do">
     <p class="fumenu">财务管理</p>
     <img class="xiala" src="../dt/img/xiala.png" />
     </a>
    </li>
    
    <li class="menu-list-02">
    <a href="/dt/admin.do">
     <p class="fumenu">员工管理</p>
     <img class="xiala" src="../dt/img/xiala.png" />
     </a>
    </li>
      <li class="menu-list-02">
     <a href="/dt/queryCompany.do">
     <p class="fumenu">交易管理</p>
     <img class="xiala" src="../dt/img/xiala.png" />
     </a>
    </li>
   </ul>
  </div>
 </div>
 <div class="right-menu">
  <div class="main-hd">
   <div class="page-teb" style="height:887px;">
    <div class="l-tab-links">
     <ul style="left:0;">
      <li class="l-select">
       <a href="/dt/queryFinance.do?goon=true" style="padding:0 25px;">首页</a>
      </li>
     </ul>
    </div>
    <div class="l-tab-content" style="height:851px;">
     <div class="tab-content-item">
      <div class="home">
      <!--成交金额-->
       <div class="space-style">
        <div class="col-xs">
         <a  href="#" class="title-button bg-deep">
          <div class="carousel">
           <div class="left-img">
            <i><img src="../dt/img/left-img1.png"></i>
            <p>成交金额</p>
           </div>
           <div class="right-info">${income}万元</div>
          </div>
         </a>
        </div>
        
         <div class="col-xs">
         <a  href="#" class="title-button bg-red">
          <div class="carousel">
           <div class="left-img bg-color-red">
            <i><img src="../dt/img/left-img2.png"></i>
            <p>订单</p>
           </div>
           <div class="right-info">${counts}笔</div>
          </div>
         </a>
        </div>
       
       <!--折线图-->
       <div class="home-goods panel">
        <div class="home-mychart" style="height:570px;overflow:hidden;">
         <p>销售对比分析</p>
          <div id="myChart" style="height:500px;border: 1px solid #ccc;padding:10px;"></div>
        </div>
       </div>
       </div>
      </div>
     </div>
    </div>
   </div>
  </div>
 </div>
</div>
</body>
</html>